<template>
    <div>
        <baidu-map class="baiduMap" :center="center" :zoom="20" @ready="handler" @click="assign">
            <bm-marker :position="{ lng: 116.404, lat: 39.915 }" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                <bm-label content="公司" :labelStyle="{ color: 'blue', fontSize: '12px' }"
                    :offset="{ width: -35, height: 30 }" />
            </bm-marker>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"
                @locationSuccess="locationSuccess"></bm-geolocation>
            <bm-circle :fillColor="'#b3d8ff'" :fill-opacity="0.5" :stroke-style="'solid'" :center="center"
                :radius="radius" @mouseover="mouseover" stroke-color="#409eff" :stroke-opacity="0.5" :stroke-weight="2"
                @lineupdate="updateCirclePath" :editing="true"></bm-circle>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        </baidu-map>
        <button @click="assign">签到</button>
        <button @click="getLocation">定位</button>
        <button @click="relocation">重新定位</button>
        <!-- <baidu-map class="baiduMap" :center="center" :zoom="zoom" @ready="handler" @click="getClickInfo"
            :scroll-wheel-zoom='true'>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"
                @locationSuccess="locationSuccess"></bm-geolocation>
            <bm-circle :fillColor="'#b3d8ff'" :fill-opacity="0.5" :stroke-style="'solid'" :center="center" :radius="radius"
                @mouseover="mouseover" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2"
                @lineupdate="updateCirclePath" :editing="true"></bm-circle>
            <bm-marker :position="{ lng: 116.404, lat: 39.915 }" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                <bm-label content="我爱北京天安门" :labelStyle="{ color: 'blue', fontSize: '24px' }"
                    :offset="{ width: -35, height: 30 }" />
            </bm-marker>
        </baidu-map> -->
    </div>
</template>

<script>

export default {
    components:{
    },
   data(){
       return{
           center: {
               lng: 115.8754416232639, //设置默认打卡地点经纬度
               lat: 28.572832845052083
           },
           asign: {
               lng: 0, //签到
               lat: 0
           },
           radius: 500,
           zoom:18
       }
   },
   methods: {
       getLocation(){
           qing.call('getLocation', {
               success: function (result) {
                   alert(JSON.stringify(result));
                }
           });
       },
       relocation() {
           let geolocation = new BMap.Geolocation()
           geolocation.getCurrentPosition((r) => {
               if (r.point) {
                   console.log(r.longitude, r.latitude)
                   this.center.lng = r.longitude
                   this.center.lat = r.latitude
               }
           }, {
               enableHighAccuracy: true
           })
       },
       //根据两组经纬度算出半径
       getGreatCircleDistance(lat1, lng1, lat2, lng2) {
           var radLat1 = (lat1 * Math.PI) / 180.0;
           var radLat2 = (lat2 * Math.PI) / 180.0;
           var a = radLat1 - radLat2;
           var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
           var s =
               2 * Math.asin(
                   Math.sqrt(
                       Math.pow(Math.sin(a / 2), 2) +
                       Math.cos(radLat1) *
                       Math.cos(radLat2) *
                       Math.pow(Math.sin(b / 2), 2)
                   )
               );
           s = s * 6378.137;
           s = Math.round(s * 10000) / 10;
           return s;
       },
       handler({
           BMap,
           map
       }) {
           //设置打卡地点
        //    let geolocation = new BMap.Geolocation()
        //    geolocation.getCurrentPosition((r) => {
        //        if (r.point) {
        //            this.center.lng = r.longitude
        //            this.center.lat = r.latitude

                   
        //        }
        //    }, {
        //        enableHighAccuracy: true
        //    })
           var point = new BMap.Point(this.center.lng, this.center.lat)
           this.zoom = 18;
           map.centerAndZoom(point, 13)
           var marker = new BMap.Marker(point) // 创建标注
           map.addOverlay(marker) // 将标注添加到地图中
           var circle = new BMap.Circle(point, 6, {
               strokeColor: 'Red',
               strokeWeight: 6,
               strokeOpacity: 1,
               Color: 'Red',
               fillColor: '#b3d8ff'
           })
           map.addOverlay(circle)

           
       },
       locationSuccess(point, AddressComponent, marker) {
           let geocoder = new BMap.Geocoder(); //创建地址解析器的实例


       },
       //根据经纬度获取打卡地点位置
       mouseover(e) {
           let nowLng = e.point.lng;
           let nowLat = e.point.lat;
           var point = new BMap.Point(nowLng, nowLat);
           var gc = new BMap.Geocoder();
           gc.getLocation(point, function (rs) {
               var addComp = rs.addressComponents;
               console.log("打卡地点" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
           });
           console.log(point)
       },
       getClickInfo(e) {
           let nowLng = e.point.lng;
           let nowLat = e.point.lat;
           console.log(e.point.lng)
           console.log(e.point.lat)
           this.center.lng = e.point.lng
           this.center.lat = e.point.lat


           let assignCircle = this.getGreatCircleDistance(nowLat, nowLng, this.center.lat, this.center.lng);
           console.log(assignCircle)
       },
       updateCirclePath(e) {
           this.center = e.target.getCenter()
           this.radius = e.target.getRadius()
       },
       //获取签到坐标，默认设置两点之间的坐标为200米之内算签到位置
       assign() {

           new Promise((resolve, reject) => {
               let geolocation = new BMap.Geolocation()
               geolocation.getCurrentPosition((r) => {
                   if (r.point) {
                       this.asign.lng = r.longitude;
                       this.asign.lat = r.latitude;
                       let assignCircle = this.getGreatCircleDistance(this.asign.lat, this.asign.lng, this.center.lat, this.center.lng);
                       if (assignCircle <= this.radius) {
                           console.log("签到范围在考勤区域内，签到成功.距签到地点距离：" + assignCircle);
                           var point = new BMap.Point(r.longitude, r.latitude);
                           var gc = new BMap.Geocoder();
                           gc.getLocation(point, function (rs) {
                               var addComp = rs.addressComponents;
                               console.log("签到地点" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                           });
                       } else {
                           console.log("不在考勤范围内" + assignCircle)
                       }
                   }
               }, {
                   enableHighAccuracy: true
               })
               resolve();
           }).finally(() => {
               // alert("考勤结束")
           });
       }
    
   },
}
</script>

<style lang="scss" scoped>
.baiduMap{
    width: 100%;
    height: 250px;
}
</style>
